<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  

    <div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{hobbies}}</p>
        <!-- 插入包含html，如果不用这种方式那么就不会转义，只会输出字符串 -->
        <p v-html="htmlString"></p>
        <!-- 数据双向绑定 -->
        <textarea v-model="bind1"></textarea>
        <!-- 数据单向绑定 -->
        <input v-bind:value="bind2">
        <!-- 事件 -->
        <button @click="show">点击试试</button>
        <!-- 循环便利 -->
        <div v-for="(item, index) in list">
            索引{{index}},内容{{item}}
        </div>
        <!-- 条件渲染 和v-show一样-->
        <div v-if="is">hello</div>
        <!-- 显示或者隐藏 -->
        <div v-show="is">hello</div>
        <!-- 插入文本 -->
        <p v-text="msg"></p>



        
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "张三",
                age: 30,
                hobbies: ["洗脚","唱","跳","rap","篮球","按摩"],
                htmlString: '<p align="center">剧中的</p>',
                bind1: "双向绑定",
                bind2: "单向绑定",
                list:[1,2,3,4],
                is: true,
                msg: "插入大量文本"
            },
            methods:{
                show(){
                    console.log("点击了")
                }
            }
        })
    </script>

</body>
</html>